 <template>
  <div>
    <div
      style="background:#fff;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;color:#666"
    >
      <div style="width:100%">
        <span
          style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
    color:#000
"
        >
          <i class="el-icon-document"></i>
          活动基本信息
        </span>
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-row :gutter="20">
            <el-col :span="6" :push="1">
              <div class="grid-content bg-purple">
                <el-form-item label="活动名称" prop="activityName">
                  <el-input v-model="ruleForm.activityName"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" :push="1">
              <div class="grid-content bg-purple">
                <el-form-item label="活动有效期" required>
                  <el-col :span="11">
                    <el-form-item prop="date1">
                      <el-date-picker
                        placeholder="选择日期"
                        v-model="ruleForm.date1"
                        style="width: 100%;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                  <el-col class="line" :span="2">-</el-col>
                  <el-col :span="11">
                    <el-form-item prop="date2">
                      <el-date-picker
                        placeholder="选择日期"
                        v-model="ruleForm.date2"
                        style="width: 100%;"
                        format="yyyy-MM-dd"
                        value-format="yyyy-MM-dd"
                      ></el-date-picker>
                    </el-form-item>
                  </el-col>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <el-row :gutter="20">
            <el-col :span="10" :push="1">
              <div class="grid-content bg-purple">
                <el-form-item label="每次消耗" prop="score">
                  <el-input v-model="ruleForm.score"></el-input>
                </el-form-item>
              </div>
            </el-col>
            <el-col :span="12" :push="1">
              <div class="grid-content bg-purple">
                <el-form-item label="活动状态" prop="status">
                  <el-select v-model="ruleForm.status" placeholder="请选择活动状态">
                    <el-option label="已发布" value="1"></el-option>
                    <el-option label="未发布" value="0"></el-option>
                  </el-select>
                </el-form-item>
              </div>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="15" :push="1">
              <div class="grid-content bg-purple">
                <el-form-item label="活动规则" prop="activityDesc">
                  <el-input type="textarea" v-model="ruleForm.activityDesc" :rows="8"></el-input>
                </el-form-item>
              </div>
            </el-col>
          </el-row>

          <!-- <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>-->
        </el-form>
      </div>
    </div>
    <div
      style="background:#fff;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;color:#666"
    >
      <div style="width:100%">
        <span
          style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
    color:#000
"
        >
          <i class="el-icon-document"></i>
          奖品配置
        </span>

        <el-table
          :data="tableData"
          style="width: 100%"
          border
          :header-cell-style="{background:'#eef1f6',color:'#606266'}"
        >
          <el-table-column type="index" label="序号" align="center" width="60" ></el-table-column>

          <el-table-column prop="prizeLevelName" label="奖品等级名称" width="180">
            <template slot-scope="scope">
              <el-input v-model="scope.row.prizeLevelName"></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="prizeCode" label="奖品编码" v-if="!this.$route.params.edit"></el-table-column>
          <el-table-column
            prop="promotionPrizeLibraryDTOS[0].prizeCode"
            label="奖品编码"
            v-if="this.$route.params.edit"
          ></el-table-column>
          <el-table-column prop="prizeName" label="奖品名称" v-if="!this.$route.params.edit"></el-table-column>
          <el-table-column
            prop="promotionPrizeLibraryDTOS[0].prizeName"
            label="奖品名称"
            v-if="this.$route.params.edit"
          ></el-table-column>
          <el-table-column prop="prizeInfo" label="奖品描述" v-if="!this.$route.params.edit"></el-table-column>
          <el-table-column
            prop="promotionPrizeLibraryDTOS[0].prizeInfo"
            label="奖品描述"
            v-if="this.$route.params.edit"
          ></el-table-column>
          <el-table-column prop="prizeType" label="奖品类型" v-if="!this.$route.params.edit">
            <template slot-scope="scope">
              <span v-if="scope.row.prizeType===2">实物奖品</span>
              <span v-if="scope.row.prizeType===1">虚拟奖品</span>
            </template>
          </el-table-column>
          <el-table-column
            prop="promotionPrizeLibraryDTOS[0].prizeType"
            label="奖品类型"
            v-if="this.$route.params.edit"
          >
            <template slot-scope="scope">
              <span v-if="scope.row.promotionPrizeLibraryDTOS[0].prizeType===2">实物奖品</span>
              <span v-if="scope.row.promotionPrizeLibraryDTOS[0].prizeType===1">虚拟奖品</span>
            </template>
          </el-table-column>
          <el-table-column prop="validDate" label="有效天数">
            <template slot-scope="scope">
              <el-input
                :disabled="flag"
                :maxlength="8"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="scope.row.validDate"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="prizeQuantity" label="奖品数量">
            <template slot-scope="scope">
              <el-input
                :disabled="flag"
                :maxlength="8"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="scope.row.prizeQuantity"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="prizeQuantityQay" label="每日中奖上限">
            <template slot-scope="scope">
              <el-input
                :disabled="flag"
                :maxlength="8"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="scope.row.prizeQuantityQay"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column prop="winningRate" label="中奖概率">
            <template slot-scope="scope">
              <el-input
                :maxlength="8"
                oninput="value=value.replace(/[^0-9.]/g,'')"
                v-model="scope.row.winningRate"
                @blur="blur()"
              ></el-input>
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" align="center" v-if="!this.$route.params.edit">
            <template slot-scope="scope">
              <el-button size="mini" @click="checkjiang(scope.row)" type="text">选择奖品</el-button>
              <el-button size="mini" @click="delprice(scope.$index)" type="text">删除奖项</el-button>
            </template>
          </el-table-column>
        </el-table>

        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item>
            <el-button
              type="primary"
              @click="add()"
              size="mini"
              icon="el-icon-edit"
              v-if="!this.$route.params.edit"
            >增加奖项</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <div
      style="background:#fff;display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;color:#666"
    >
      <div style="width:100%">
        <span
          style="    font-size: 20px;
    margin: 30px 40px;
    display: inline-block;
    color:#000
"
        >
          <i class="el-icon-document"></i>
          会员抽奖免费次数、中奖概率配置
        </span>

        <!-- <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >-->
        <el-row :gutter="20">
          <el-col :span="15" :push="1">
            <div
              class="grid-content bg-purple"
              style="display: flex;margin:10px 0"
              v-for="(send,index) in options"
              :key="index"
            >
              <div style="display: flex;    align-items: center;">
                <span>{{send.gradelevelName}}</span>
                <span>每天</span>
                <span style="margin:0 10px;">
                  <el-input v-model="data[index]" placeholder="请输入次数"></el-input>
                </span>
                <span>次,</span>
              </div>
              <div style="display: flex;    align-items: center;">
                <span style="margin:0 10px;">对所有奖品中奖概率提升</span>

                <span>
                  <el-input v-model="dataone[index]" placeholder="请输入提升概率"></el-input>
                </span>
              </div>
            </div>
          </el-col>
        </el-row>
        <!-- </el-form> -->
      </div>
    </div>
    <el-button size="mini" @click="postsure()" type="primary" style="margin-left: 600px;">确定</el-button>
    <el-button size="mini" @click="delsure()" type="primary">取消</el-button>
    <el-dialog title="奖品列表" :visible.sync="dialogVisible" width="80%">
      <el-table
        :data="tableDataone"
        style="width: 100%"
        @select="handleRow"
        ref="tables"
        @selection-change="handleSelectionChange"
        border
        :header-cell-style="{background:'#eef1f6',color:'#606266'}"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60" ></el-table-column>
        <el-table-column prop="prizeCode" label="奖品编码"></el-table-column>
        <el-table-column prop="prizeName" label="奖品名称"></el-table-column>
        <el-table-column prop="prizeInfo" label="奖品描述"></el-table-column>
        <el-table-column prop="prizeType" label="奖品类型">
          <template slot-scope="scope">
            <span v-if="scope.row.prizeType===2">实物奖品</span>
            <span v-if="scope.row.prizeType===1">虚拟奖品</span>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间"></el-table-column>
      </el-table>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="sure()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

   <script>
import { getmemberrule } from "@/api/membergrade";
import { queryPrize, createActivityConfig } from "@/api/lotteryActivityset";
export default {
  data() {
    return {
      data: [],
      dataone: [],
      options: [],
      ruleForm: {
        uuid: "",
        activityName: "",
        status: "1",
        date1: "",
        date2: "",
        activityDesc: "",
        score: ""
      },
      flag: false,
      formInline: {
        gradelevelName: "",
        gradelevelCode: ""
      },
      selectone: [],
      dialogVisible: false,
      tableData: [],
      tableDataone: [],
      tableDatatwo: [],
      glevel: [],
      rules: {
        name: [
          { required: true, message: "请输入活动名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        ],
        region: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        date1: [
          {
            type: "date",
            required: true,
            message: "请选择日期",
            trigger: "change"
          }
        ],
        level: "",

        selectData: [],
        date2: [
          {
            type: "date",
            required: true,
            message: "请选择时间",
            trigger: "change"
          }
        ],
        type: [
          {
            type: "array",
            required: true,
            message: "请至少选择一个活动性质",
            trigger: "change"
          }
        ],
        resource: [
          { required: true, message: "请选择活动资源", trigger: "change" }
        ],
        desc: [{ required: true, message: "请填写活动形式", trigger: "blur" }]
      }
    };
  },
  mounted() {
    this._getmemberinfo();
    this.setprice();
    console.log(this.$route.params.edit, "978");

    if (this.$route.params.edit) {
      this.flag = true;
      this.ruleForm.uuid = this.$route.params.edit.uuid;
      this.ruleForm.activityName = this.$route.params.edit.activityName;
      this.ruleForm.status = String(this.$route.params.edit.status);
      this.ruleForm.date1 = this.$route.params.edit.activityBeginTime;
      this.ruleForm.date2 = this.$route.params.edit.activityEndTime;
      this.ruleForm.activityDesc = this.$route.params.edit.activityDesc;
      this.ruleForm.score = this.$route.params.edit.score;
      this.tableData = this.$route.params.edit.promotionActivityPrizeConfigDTOList;
      this.glevel = this.$route.params.edit.promotionActivityMemberConfigDTOList;
      this.$route.params.edit.promotionActivityMemberConfigDTOList.forEach(
        (item, i) => {
          this.data[
            i
          ] = this.$route.params.edit.promotionActivityMemberConfigDTOList[
            i
          ].dayTimes;
          this.dataone[
            i
          ] = this.$route.params.edit.promotionActivityMemberConfigDTOList[
            i
          ].addWinningRate;
        }
      );
    } else {
      this.flag = false;
    }
    console.log(this.tableData, "9781");
  },
  methods: {
    handleRow(selection, row) {
      // 先清除所有选中的
      this.$refs.tables.clearSelection();
      // 当前的点击实现勾选
      this.$refs.tables.toggleRowSelection(row);
    },

    _getmemberinfo() {
      let data = {
        size: 10,
        current: 1,
        condition: {},
        ascs: [],
        descs: []
      };
      getmemberrule(data).then(res => {
        this.options = res.records;
        this.options.forEach((item, i) => {
          this.data.push("1");
          this.dataone.push("1");
        });
      });
    },
    setprice() {
      this.tableData.push(
        { prizeLevel: "1", prizeLevelName: "一等奖" },
        { prizeLevel: "2", prizeLevelName: "二等奖" },
        { prizeLevel: "3", prizeLevelName: "三等奖" },
        { prizeLevel: "4", prizeLevelName: "四等奖" },
        { prizeLevel: "5", prizeLevelName: "五等奖" }
      );
    },

    checkjiang(v) {
      console.log(v, "iuy");
      this.level = v.prizeLevel;
      this.dialogVisible = true;
      let data = {
        size: 10,
        current: 1,
        condition: {
          prizeName: "",
          prizeCode: "",
          prizeType: ""
        },
        ascs: [],
        descs: []
      };
      queryPrize(data).then(res => {
        this.tableDataone = res.records;
      });
    },
    blur() {
      console.log("oo8");
    },
    sure() {
      //   console.log(type of(this.level), "yy");
      this.dialogVisible = !this.dialogVisible;
      console.log(this.selectData, "kkk");

      this.tableData.forEach((item, i) => {
        if (this.level == this.tableData[i].prizeLevel) {
          //   this.tableData[i].push(this.selectData);
          let returnedTarget = Object.assign(
            this.selectData[0],
            this.tableData[i]
          );
          console.log(returnedTarget, "kkk");
          this.tableData[i] = returnedTarget;
          this.tableDatatwo = this.tableData;
        }
      });
      this.tableData = [];
      this.tableDatatwo.forEach((item, i) => {
        console.log(item, "kkkw");
        this.tableData.push(item);
      });

      console.log(this.tableData, "kkk");
      //
    },
    handleSelectionChange(val) {
      //   this.selectData = [];
      this.selectData = val;
      console.log(this.selectData, "8833");
    },
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    add() {
      this.tableData.push({});
    },
    delprice(index) {
      console.log(index, "kk1");
      this.tableData.splice(index, 1);
    },
    postsure() {
      console.log(this.tableData, "iii");
      console.log(this.dataone, "97");
      console.log(this.data, "99");
      console.log(this.options, "9933");
      this.options.forEach((item, i) => {
        console.log(this.options[i], "99");

        if (this.$route.params.edit) {
          //   this.glevel.push({
          //     uuid: this.options[i].uuid,
          //     dayTimes: this.data[i],
          //     addWinningRate: this.dataone[i],
          //     status: 1
          //   });
          console.log(this.glevel, "ii66");
        } else {
          this.glevel.push({
            uuid: "",
            memberLevelId: this.options[i].uuid,
            activityId: "",
            dayTimes: this.data[i],
            addWinningRate: this.dataone[i],
            status: 1
          });
        }
      });
      this.tableData.forEach((item, i) => {
        console.log(item, "000");
        if (this.tableData[i].winningRate) {
          this.selectone.push(this.tableData[i]);
        }
        console.log(this.selectone, "0002");
      });
      let newData = [];
      let obj = {};
      this.selectone.map(item => {
        obj = item;
        obj["prizeId"] = item["uuid"];
        delete obj["uuid"];
        newData.push(obj);
      });
      this.selectone = newData;
      console.log(this.selectone, "kk8969");
      let data = {
        uuid: this.ruleForm.uuid,
        activityName: this.ruleForm.activityName,
        activityBeginTime: this.ruleForm.date1,
        activityEndTime: this.ruleForm.date2,
        score: this.ruleForm.score,
        status: this.ruleForm.status,
        activityDesc: this.ruleForm.activityDesc,
        promotionActivityPrizeConfigDTOList: this.selectone,
        promotionActivityMemberConfigDTOList: this.glevel

        // [
        //   {
        //     uuid: "dad02b39-b33f-408b-a5b9-797f2fe5e4d4",
        //     activityId: "be39d74c-8f54-4e29-bbfd-38df6d975013",
        //     memberLevelId: "156c397b-3061-4de8-ae26-93a7ef18fb85",
        //     dayTimes: 1,
        //     addWinningRate: 0.04,
        //     status: 1
        //   }
        // ]
      };
      if (this.$route.params.edit) {
        createActivityConfig(data).then(res => {
          this.tableDataone = res.records;

          if (res.code == "1") {
            this.$message({
              showClose: true,
              message: "修改成功",
              type: "success"
            });

            this.$router.push("lotteryActivityset");
          } else {
            this.$message({
              showClose: true,
              message: "修改失败",
              type: "success"
            });
          }
          this.glevel = [];
        });
      } else {
        createActivityConfig(data).then(res => {
          this.tableDataone = res.records;

          if (res.code == "1") {
            this.$message({
              showClose: true,
              message: "保存成功",
              type: "success"
            });
            this.$router.push("lotteryActivityset");
          } else {
            this.$message({
              showClose: true,
              message: "保存失败",
              type: "success"
            });
          }
        });
      }
    },

    delsure() {
      this.$router.push("lotteryActivityset");
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
};
</script>